import React from 'react';
import NavBar from '../Common/NavBar';

class DigitalClock extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            // 初始化, 当前时间
            date: new Date()
        }
    }
    // 组件生命周期钩子函数: 挂载; render 渲染到 dom 时就自动触发这些钩子函数
    componentDidMount() {
        this.timer = setInterval(() => {
            this.setState({
                date: new Date()
            });
        }, 1000);
    }
    // 组件生命周期钩子函数: 卸载
    componentWillUnmount() {
        clearInterval(this.timer)
    }
    render() {
        return(
            <div>
                <NavBar title="时钟"></NavBar>
                <div className="digital-clock-component jumbotron">
                    <h1>{ this.state.date.toLocaleTimeString()}</h1>
                </div>
            </div>
        )
    }
}

export default DigitalClock;